<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>豆瓣仿</title>
    <link href="./imgs/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    <style>
      /* reset begin */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      img,
      input,
      button {
        border: none;
      }
      button,
      input {
        outline: none;
      }
      button {
        display: block;
      }
      ul {list-style: none;}
      /* reset end */
      /* css helper begin */
      .rounded {
        border-radius: 2px;
      }
      .cursor-pointer {
        cursor: pointer;
      }
      .select-none{
        user-select: none;
      }
      .flex {
        display: flex;
      }
      .align-center {
        align-items: center;
      }
      .justify-center {
        justify-content: center;
      }
      /* css helper end */
      :root {
        --primary: #41ac52;
      }
      .container {
        display: flex;
        align-items: center;
        padding: 0 20px
        width: 100vw;
        height: 304px;
        background-image: url(./imgs/loginLogo.jpg);
        background-size: contain;
        background-position: calc(50% - 305px) top;
        background-repeat: no-repeat;
        background-color: #edf4ed;
      }
      .form {
        float: right;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 100px;
        width: 300px;
        padding: 30px 10px 10px;
      }
      .form > div {
        margin-bottom: 10px;
        width: 100%;
      }
      .tel-or-email input,
      .password input {
        width: 100%;
        padding: 8px;
        background-color: #fff;
        border: 1px solid #e4e6e5;
        outline: none;
      }
      .form .login {
        display: grid;
        place-items: center;
        padding: 8px;
        margin-bottom: 10px;
        width: 100%;
        background-color: var(--primary);
        color: #fff;
        font-size: 13px;
      }
      .form .options {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
      }
      .rember {
        display: flex;
        align-items: center;
      }
      .rember input {
        margin-right: 4px;
      }
      .options .register {
        color: var(--primary);
      }
      .login-3rd {
        display: flex;
        align-items: center;
        padding-top: 10px;
        border-top: 1px solid #ddd;
      }
      .login-3rd a {
        display: flex;
        align-items: center;
        margin-left: 12px;
      }
      .login-3rd span {
        color: #9b9b9b;
        font-size: 11px;
      }
      .login-3rd img {
        height: 22px;
        width: 22px;
      }
      .app {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: auto;
        margin-right: 120px;
      }
      .app-title {
        width: 100%;
        margin-bottom: 20px;
        font-size: 25px;
        color: #111;
      }
      .app-download  {
        position: relative;
        display: flex;
        align-content: center;
        justify-content: center;
      }
      .app-download button {
        padding: 6px 21px;
        margin-right: 4px;
        background: #00B51D;
        color: #FFF;
      }
      .app-download a {
        border: 1px solid #48aa0d;
        border-radius: 2px;
      }
      .app-download .app-qr {
         vertical-align: middle;
      }

      .app-download a:hover  .app-qr-expand {
        display: block;
      }

      .app-qr-expand {
        display: none;
        position: absolute;
        top: 31px;
        left: 126px;
        padding: 20px 20px 5px;
        border-radius: 2px;
        background: #fff;
      }

      .app-qr-expand img {
        margin-bottom: 20px;
      }

      .app-qr-expand p {
        text-align: center;
        font-size: 13px;
        line-height: 13px;
        color: #666;
        white-space: nowrap;
      }

      header {
        padding: 25px 200px;
      }
      nav {
        display: flex;
      }
      .site-logo {

      }
      .searchbar {
        margin-left: 30px;
        padding-left: 6px;
        border: 1px solid #c3c3c3;
      }


      .searchbar input {
        width: 240px;
        font-size: 13px;
      }

      .searchbar  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
        color: #ccc;
        font-size: 13px;
      }
      .searchbar div {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
      }

      .navlist {
        display: flex;
        align-items: center;
        margin-left: auto;
      }

      .navlist ul{
        display: flex;
      }
      .navlist li{
        width: 40px;
        height: 20px;
        cursor: pointer;
      }

      .navlist li+li{
        margin-left: 14px;
      }

      .navlist li:nth-child(1){
        background-image: url(./imgs/anony_nav_logo.png);
        background-position: 0 -100px;
      }
      .navlist li:nth-child(2){
        background-image: url(./imgs/anony_nav_logo.png);
        background-position: -60px -100px;
      }
      .navlist li:nth-child(3){
        background-image: url(./imgs/anony_nav_logo.png);
        background-position: -120px -100px;
      }
      .navlist li:nth-child(4){
        background-image: url(./imgs/anony_nav_logo.png);
        background-position: -180px -100px;
      }
      .navlist li:nth-child(5){
        background-image: url(./imgs/anony_nav_logo.png);
        background-position: -240px -100px;
      }
      .navlist li:nth-child(6){
        background-image: url(./imgs/anony_nav_logo.png);
        background-position: -299px -100px;
      }
      .navlist li:nth-child(7){
        background-image: url(./imgs/anony_nav_logo.png);
        background-position: -361px -100px;
      }
      .navlist li:nth-child(8){
        background-image: url(./imgs/anony_nav_logo.png);
        background-position: -422.5px -100px;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <div class="site-logo">
          <img src="./imgs/logo_db.png" alt="" />
        </div>
        <div class="searchbar flex align-center">
          <input type="text" placeholder="书籍、电影、音乐、小组、小站、成员" />
          <div class="cursor-pointer">
            <img src="./imgs/btnSearch.png" alt="" />
          </div>
        </div>
        <div class="navlist">
          <ul>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
          </ul>
        </div>
      </nav>
    </header>
    <div class="container">
      <div class="app">
        <div class="app-title">豆瓣 7.0</div>
        <div class="app-download">
          <button class="cursor-pointer">下载豆瓣 App</button>
          <a href="#">
            <img
              class="app-qr"
              src="./imgs/icon_qrcode_green.png"
              alt=""
              width="28"
              height="28"
            />
            <div class="app-qr-expand">
              <img
                src="./imgs//doubanapp_qrcode.png"
                alt=""
                width="160"
                height="160"
              />
              <p>iOS / Android 扫码直接下载</p>
            </div>
          </a>
        </div>
      </div>

      <div class="form">
        <div class="tel-or-email">
          <input class="rounded" type="text" placeholder="手机号/邮箱" />
        </div>
        <div class="password">
          <input class="rounded" type="text" placeholder="密码" />
        </div>
        <button class="login rounded cursor-pointer select-none">
          登录豆瓣
        </button>
        <div class="options select-none">
          <div class="rember">
            <input class="cursor-pointer" type="checkbox" id="rember" />
            <label class="cursor-pointer" for="rember">下次自动登录</label>
          </div>
          <div class="register cursor-pointer">注册账号</div>
        </div>
        <div class="login-3rd">
          <span class="select-none">第三方登录：</span>
          <a href=""><img src="./imgs/wx.svg" alt="" /></a>
          <a href=""><img src="./imgs/wb.svg" alt="" /></a>
        </div>
      </div>
    </div>
  </body>
</html>
